<template>
    <view>
        <uni-section title="指标监测" type="line" padding>
            <uni-grid :column="3" border-color="#03a9f4" @change="change">
                <uni-grid-item :index="0">
                    <view class="grid-item-box">
                        <image :src="imageUrl" class="image" mode="aspectFill" />
                        <text class="text">拍照</text>
                    </view>
                </uni-grid-item>
                <uni-grid-item :index="1">
                    <view class="grid-item-box">
                        <input class="uni-input" v-model="weight" style="text-align:center" type="digit" placeholder="输入体重（KG）" />
                        <text class="text">输入体重（KG）</text>
                    </view>
                </uni-grid-item>
                <uni-grid-item :index="2">
                    <view class="grid-item-box">
                        <image class="image" src="/static/images/grid/c3.png" mode="aspectFill" />
                        <text class="text">提交</text>
                    </view>
                </uni-grid-item>
            </uni-grid>
        </uni-section>
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listData" :key="key"
                @click="goDetail(value)">
                <view class="uni-media-list">
                    <image class="uni-media-list-logo" :src="value.cover"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{value.title}}</view>
                        <view class="uni-media-list-text-bottom">
                            <text>{{value.author_name}}</text>
                            <text>{{value.published_at}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import request from '@/utils/request'

    function formatTime(time) {
	if (typeof time !== 'number' || time < 0) {
		return time
	}

	var hour = parseInt(time / 3600)
	time = time % 3600
	var minute = parseInt(time / 60)
	time = time % 60
	var second = time

	return ([hour, minute, second]).map(function (n) {
		n = n.toString()
		return n[1] ? n : '0' + n
	}).join(':')
}

function formatLocation(longitude, latitude) {
	if (typeof longitude === 'string' && typeof latitude === 'string') {
		longitude = parseFloat(longitude)
		latitude = parseFloat(latitude)
	}

	longitude = longitude.toFixed(2)
	latitude = latitude.toFixed(2)

	return {
		longitude: longitude.toString().split('.'),
		latitude: latitude.toString().split('.')
	}
}
var dateUtils = {
	UNITS: {
		'年': 31557600000,
		'月': 2629800000,
		'天': 86400000,
		'小时': 3600000,
		'分钟': 60000,
		'秒': 1000
	},
	humanize: function (milliseconds) {
		var humanize = '';
		for (var key in this.UNITS) {
			if (milliseconds >= this.UNITS[key]) {
				humanize = Math.floor(milliseconds / this.UNITS[key]) + key + '前';
				break;
			}
		}
		return humanize || '刚刚';
	},
	format: function (dateStr) {
		var date = this.parse(dateStr)
		var diff = Date.now() - date.getTime();
		if (diff < this.UNITS['天']) {
			return this.humanize(diff);
		}
		var _format = function (number) {
			return (number < 10 ? ('0' + number) : number);
		};
		return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' +
			_format(date.getHours()) + ':' + _format(date.getMinutes());
	},
	parse: function (str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
		var a = str.split(/[^0-9]/);
		return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
	}
};

module.exports = {
	formatTime: formatTime,
	formatLocation: formatLocation,
	dateUtils: dateUtils
}

    export default {
        data() {
            return {
                listData: [],
                last_id: "",
                reload: false,

                tempPath: '',
                imageUrl: '/static/images/grid/c1.png',
                weight: 0
            }
        },
        onLoad() {
            this.getList();
        },
        onPullDownRefresh() {
            this.reload = true;
            this.last_id = "";
            this.getList();
        },
        onReachBottom() {
            this.getList();
        },
        methods: {
            getList() {
                var data = {
                    pageSize: 10
                };
                if (this.last_id) { //说明已有数据，目前处于上拉加载
                    data.bbId = this.last_id;
                    data.time = new Date().getTime() + "";
                    data.pageSize = 10;
                }
                // uni.request({
                //     url: 'https://unidemo.dcloud.net.cn/api/news',
                //     data: data,
                //     success: (data) => {
                //         if (data.statusCode == 200) {
                //             let list = this.setTime(data.data);
                //             this.listData = this.reload ? list : this.listData.concat(list);
                //             this.last_id = list[list.length - 1].id;
                //             this.reload = false;
                //         }
                //     },
                //     fail: (data, code) => {
                //         console.log('fail' + JSON.stringify(data));
                //     }
                // })
                request({
                    url: '/system/bbmMonitor/unilist',
                    method: 'get',
                    data: data
                }).then(res=>{
                    let list = this.setTime(res);
                    this.listData = this.reload ? list : this.listData.concat(list);
                    this.last_id = list[list.length - 1].id;
                    this.reload = false;
                })
            },
            goDetail: function(e) {
                // 				if (!/前|刚刚/.test(e.published_at)) {
                // 					e.published_at = dateUtils.format(e.published_at);
                // 				}
                let detail = {
                    author_name: e.author_name,
                    cover: e.cover,
                    id: e.id,
                    post_id: e.post_id,
                    published_at: e.published_at,
                    title: e.title
                }
                uni.navigateTo({
                    url: "./list2detail-detail/list2detail-detail?detailDate=" + encodeURIComponent(JSON.stringify(
                        detail))
                })
            },
            setTime: function(items) {
                var newItems = [];
                items.forEach((e) => {
                    newItems.push({
                        author_name: e.monitorType,
                        cover: e.pic,
                        id: e.bbId,
                        // published_at: dateUtils.format(e.monitorTime),
                        published_at: e.monitorTime,
                        title: e.monitorVal
                    });
                });
                return newItems;
            },
          change(e) {
            let idx=e.detail.index
            if(idx===0){
                uni.chooseImage({
                    count: 6, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'],
                    success: (res) => {
                        this.tempPath=res.tempFilePaths[0];
                        this.imageUrl=this.tempPath;
                    }
                });
            }
            if(idx===2){
                uni.uploadFile({
                    url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
                    filePath: this.tempFilePaths,
                    name: 'file',
                    formData: {
                        'user': 'test'
                    },
                    success: (uploadFileRes) => {
                        console.log(uploadFileRes.data);
                    }
                });
            }
          }
        },
    }
</script>

<style>
    .banner {
        height: 360upx;
        overflow: hidden;
        position: relative;
        background-color: #ccc;
    }

    .banner-img {
        width: 100%;
    }

    .banner-title {
        max-height: 84upx;
        overflow: hidden;
        position: absolute;
        left: 30upx;
        bottom: 30upx;
        width: 90%;
        font-size: 32upx;
        font-weight: 400;
        line-height: 42upx;
        color: white;
        z-index: 11;
    }

    .uni-list {
        background-color: #FFFFFF;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .uni-list:after {
        position: absolute;
        z-index: 10;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .uni-list::before {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .uni-list-cell {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .uni-list-cell-hover {
        background-color: #eee;
    }

    .uni-list-cell::after {
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: 0;
        left: 30upx;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .uni-list .uni-list-cell:last-child::after {
        height: 0upx;
    }

    /* 图文列表 */
    .uni-media-list {
        padding: 22upx 30upx;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        flex-direction: row;
    }

    .uni-navigate-right.uni-media-list {
        padding-right: 74upx;
    }

    .uni-pull-right {
        flex-direction: row-reverse;
    }

    .uni-pull-right>.uni-media-list-logo {
        margin-right: 0upx;
        margin-left: 20upx;
    }

    .uni-media-list-logo image {
        height: 100%;
        width: 100%;
    }


    .uni-media-list-text-bottom {
        width: 100%;
        line-height: 30upx;
        font-size: 26upx;
        color: #8f8f94;
    }

    .uni-media-list-logo {
        width: 180upx;
        height: 140upx;
        margin-right: 20upx;
    }

    .uni-media-list-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        overflow: hidden;
        height: auto;
    }

    .uni-media-list-text-top {
        width: 100%;
        line-height: 36upx;
        font-size: 30upx;
        height: 74upx;
        font-size: 28upx;
        overflow: hidden;
    }

    .uni-media-list-text-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
</style>
<style lang="scss">
    .image {
        width: 80px;
        height: 80px;
    }

    .text {
        font-size: 14px;
        margin-top: 5px;
    }

    .example-body {
        /* #ifndef APP-NVUE */
        // display: block;
        /* #endif */
    }

    .grid-dynamic-box {
        margin-bottom: 15px;
    }

    .grid-item-box {
        flex: 1;
        // position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
    }

    .grid-item-box-row {
        flex: 1;
        // position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
    }

    .grid-dot {
        position: absolute;
        top: 5px;
        right: 15px;
    }

    .swiper {
        height: 420px;
    }

    /* #ifdef H5 */
    @media screen and (min-width: 768px) and (max-width: 1425px) {
        .swiper {
            height: 630px;
        }
    }

    @media screen and (min-width: 1425px) {
        .swiper {
            height: 830px;
        }
    }

    /* #endif */
</style>

